<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>更新商品</title>
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
	<link rel="stylesheet" href="../../css/oksub.css">
	<link rel="stylesheet" href="../../css/style.css">
	<script type="text/javascript" src="../../lib/loading/okLoading.js"></script>
<!--	<script src="https://cdn.staticfile.org/layui/2.5.7/layui.js"></script>-->
<!--	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>-->
</head>
<body>
<div class="ok-body">
	<!--form表单-->
	<form class="layui-form ok-form" lay-filter="filter">
		<div class="layui-form-item">
			<label class="layui-form-label" style="display: none;">编号</label>
			<div class="layui-input-block">
				<input type="text" name="sid" placeholder="请输入商品编号" autocomplete="off" class="layui-input"
					   lay-verify="required">
			</div>
		</div>
		<div class="layui-form-item">
			<label class="layui-form-label">品牌</label>
			<div class="layui-input-block">
				<input type="text" name="sbrand" placeholder="请输入品牌" autocomplete="off" class="layui-input"
					   lay-verify="required">
			</div>
		</div>
		<div class="layui-form-item">
			<label class="layui-form-label">款式</label>
			<div class="layui-input-block">
				<input type="text" name="sgender" placeholder="请输入款式" autocomplete="off" class="layui-input"
					   lay-verify="required">
			</div>
		</div>
		<div class="layui-form-item">
			<label class="layui-form-label">尺码</label>
			<div class="layui-input-block">
				<input type="text" name="ssize" placeholder="请输入尺码" autocomplete="off" class="layui-input"
					   lay-verify="required">
			</div>
		</div>
		<div class="layui-form-item">
			<label class="layui-form-label">颜色</label>
			<div class="layui-input-block">
				<input type="text" name="scolor" placeholder="请输入颜色" autocomplete="off" class="layui-input"
					   lay-verify="required">
			</div>
		</div>
		<div class="layui-form-item">
			<label class="layui-form-label">类型</label>
			<div class="layui-input-block">
				<select name="sstyle">
					<option value="1">健康</option>
					<option value="2">网球</option>
					<option value="3">足球</option>
					<option value="4">运动</option>
					<option value="5">高尔夫</option>
				</select>
			</div>
		</div>
		<div class="layui-form-item">
			<label class="layui-form-label">单价</label>
			<div class="layui-input-block">
				<input type="text" name="sprice" placeholder="请输入单价" autocomplete="off" class="layui-input"
					   lay-verify="required">
			</div>
		</div>
		<div class="layui-form-item layui-form-text">
			<label class="layui-form-label">概述</label>
			<div class="layui-input-block">
				<textarea name="sdescription" placeholder="请输入内容" class="layui-textarea"></textarea>
			</div>
		</div>
		<div class="layui-form-item">
			<label class="layui-form-label">库存</label>
			<div class="layui-input-block">
				<input type="text" name="sstockquantity" placeholder="请输入库存" autocomplete="off" class="layui-input"
					   lay-verify="required">
			</div>
		</div>
		<div class="layui-form-item"  style="display: none;">
			<label class="layui-form-label">图片路径</label>
			<div class="layui-input-block">
				<input type="text" name="photourl" placeholder="请输入路径" autocomplete="off" class="layui-input"
					   lay-verify="required">
			</div>
		</div>
		<div class="layui-form-item">
			<div class="layui-input-block">
				<button class="layui-btn" lay-submit lay-filter="edit">立即提交</button>
				<button type="reset" class="layui-btn layui-btn-primary">重置</button>
			</div>
		</div>
	</form>
</div>
<div class="container"> 选择上传的主图片:<input type="file" name="file" id="file" > <br />
	<input type="button"  id="btn" value="上传" onclick="reg()"/>
	<div id="resultdiv"></div>
	<h2>下面是你的主图</h2>
	<img src="" id="myImg" width="100px"height="100px"></div>
<div class="container">
	<input type="file" name="cfile" id="cfile" multiple>
	<br />
	<h2>选择你要上传的副图</h2>
	<input type="button" id="btn1" value="上传" onclick="addmore()">
	<div id="cresultdiv"></div>
	<h2>如果是图片则显示在下面:</h2>
	<div id="imagePreview"></div>
</div>

<!--js逻辑-->
<script src="../../lib/layui/layui.js"></script>
<script src="../../js/axios.js"></script>
<script>

	let initData;
	function initForm(data) {
		let jsonString = JSON.stringify(data);
		initData = JSON.parse(jsonString);
		axios.post("../../../FileToOSSText.action?op=getsid",data).then(  result =>{
			let jm = result.data;
			if ( jm.code==1 ){
				console.log('请求成功，处理代码为 1');
			}
		})
	}
	layui.use(["element", "form", "laydate", "okLayer", "okUtils"], function () {
		let form = layui.form;
		let laydate = layui.laydate;
		let okLayer = layui.okLayer;
		let okUtils = layui.okUtils;
		okLoading.close();
		form.val("filter", initData);

		laydate.render({elem: "#birthday", type: "datetime"});

		// form.verify({
		// 	birthdayVerify: [/^((((1[6-9]|[2-9]\d)\d{2})-(0?[13578]|1[02])-(0?[1-9]|[12]\d|3[01]))|(((1[6-9]|[2-9]\d)\d{2})-(0?[13456789]|1[012])-(0?[1-9]|[12]\d|30))|(((1[6-9]|[2-9]\d)\d{2})-0?2-(0?[1-9]|1\d|2[0-8]))|(((1[6-9]|[2-9]\d)(0[48]|[2468][048]|[13579][26])|((16|[2468][048]|[3579][26])00))-0?2-29-))(\s(([01]\d{1})|(2[0123])):([0-5]\d):([0-5]\d))?$/, '日期格式不正确']
		// });

		form.on("submit(edit)", function (data) {
			//
			okUtils.ajax("/goods.action?op=updategood", "POST", data.field, true).done(function (response) {
				console.log(response);
				okLayer.greenTickMsg("编辑成功", function () {
					parent.layer.close(parent.layer.getFrameIndex(window.name));
				});
			}).fail(function (error) {
				console.log(error)
			});
			return false;
		});
	})

</script>
<script>
	function $(id) {
		return document.getElementById(id);
	}
	function reg() {
		let file =document.getElementById("file").files; //同名的file元素有多个
		//具体流程 第一步
		const formData=new FormData(); // 表示以表单形式构建参数
		// formData.append( "file", file);
		for(let i = 0; i < file.length; i++) {
			formData.append("file"+i, file[i]); // 将文件对象添加到 formData 中
		}
		// 第四步 向后端传数据  ， 提交数据到后端
		const postData = async (url, data) => {
			try {
				const response = await fetch(url, {
					method: 'POST',
					//参数 ： 因为有图片，文件，所以不能以json格式传数据
					body: data
				});
				// 前后端关键地方  前后端分隔的地方  暂停  等后端处理完前端传的数据  接收来自后端的数据  返回出去
				const result = await response.json(); //将响应体解析为 JSON 格式
				return result; //此result是一个包含了jsonmodel的promise对象
			} catch (error) {
				console.error('Error sending POST request:', error);
			}
		};
		//第二步   设置要调的Servlet 并传一个op判断调用的方法
		const apiUrl = '../../../FileToOSSText.action?op=regFile';
		//第三步   传递参数
		const pro = postData( apiUrl , formData ); //pro就是执行后的promise对象
		//第五步   接收后端数据  进行判断
		pro.then(jsonobj => {
			if (jsonobj.code == 1) {
				$("resultdiv").innerHTML = "<b>文件上传成功</b> <br />链接地址:"+jsonobj.obj;
				$('myImg').src=jsonobj.obj ;
			} else {
				$("resultdiv").innerHTML = "<b>文件上传失败</b> 原因:" + jsonobj.error;
			}
		});
	}
</script>
<script>
	function $(id) {
		return document.getElementById(id);
	}

	function addmore() {
		var fileInput = document.getElementById('cfile');
		var files = fileInput.files;
		var imagePreview = document.getElementById('imagePreview');

		// 清空之前的预览
		imagePreview.innerHTML = '';

		// 遍历选择的文件
		for (var i = 0; i < files.length; i++) {
			var file = files[i];
			var reader = new FileReader();

			// 仅处理图片文件
			if (!file.type.startsWith('image/')) {
				continue;
			}

			// 闭包保留当前文件的引用
			(function(file) {
				// 读取文件内容，创建预览
				reader.onload = function(e) {
					var img = document.createElement('img');
					img.src = e.target.result;
					img.width = 100;
					img.height = 100;
					imagePreview.appendChild(img);

					// 上传到OSS并显示URL
					uploadToOSS(file);
				}

				// 读取文件
				reader.readAsDataURL(file);
			})(file);
		}
	}

	function uploadToOSS(file) {
		var url = '../../../FileToOSSText.action?op=addmore'; // 替换成你的OSS上传地址
		var formData = new FormData();
		formData.append('file', file);

		fetch(url, {
			method: 'POST',
			body: formData
		})
				.then(response => response.text())
				.then(url => {
					// 显示上传后的URL
					var resultDiv = document.getElementById('cresultdiv');
					resultDiv.innerHTML += '<p>上传成功: <a href="' + url + '" target="_blank">' + url + '</a></p>';
				})
				.catch(error => {
					console.error('上传失败:', error);
				});
	}
</script>
</body>
</html>
